<template>
  <div class="pb50" v-loading="loading">
    <!--订单进度-->
    <!--内容-->
    <div class="product-content">
      <div class="common-form">实时概况</div>
      <div class="table-wrap">
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="pb16 grid-content bg-purple">
              <div>营业总额(元)</div>
              <div class="detail_prici">{{ detail.total_price }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="pb16 grid-content bg-purple">
              <div>预计收入(元)</div>
              <div class="detail_prici">{{ detail.income_money }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="pb16 grid-content bg-purple">
              <div>有效订单(元)</div>
              <div class="detail_prici">{{ detail.order_count }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="pb16 grid-content bg-purple">
              <div>退款金额(元)</div>
              <div class="detail_prici">{{ detail.refund_money }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--内容-->
      <div class="product-content d-b-c ww100">
         <div class="right-box d-s-s d-c flex-1 pr16">
           <div class="lh30 f16 tl">商品排行榜</div>
           <div class="list ww100">
             <ul v-if="salesNumRank.length>0">
               <li v-for="(item, index) in salesNumRank" :key="index" class="d-s-c p-6-0 border-b-d">
                 <span class="key-box">{{ index + 1 }}</span>
                 <span class="text-ellipsis-2 flex-1 ml10">{{ item.product_name }}</span>
                 <span class="gray9 tr" style="width: 200px;" >
                   <template>
                     销量：{{ item.total_num }}
                   </template>
                   <template>
                     销售额：{{ item.total_price }}
                   </template>
                  </span>
               </li>
             </ul>
             <div v-else class="tc pt30">暂无上榜记录</div>
           </div>
         </div>
         <div class="right-box d-s-s d-c flex-1 pr16">
           <div class="lh30 f16 tl">商品排行榜</div>
           <div class="list ww100">
             <ul v-if="salesMoneyRank.length>0">
               <li v-for="(item, index) in salesMoneyRank" :key="index" class="d-s-c p-6-0 border-b-d">
                 <span class="key-box">{{ index + 1 }}</span>
                 <span class="text-ellipsis-2 flex-1 ml10">{{ item.product_name }}</span>
                 <span class="gray9 tr" style="width: 200px;" >
                   <template>
                     销量：{{ item.total_num }}
                   </template>
                   <template>
                     销售额：{{ item.total_price }}
                   </template>
                  </span>
               </li>
             </ul>
             <div v-else class="tc pt30">暂无上榜记录</div>
           </div>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
  import StoreApi from '@/api/store.js';
  export default {
    data() {
      return {
        active: 0,
        /*是否加载完成*/
        loading: true,
        /*订单数据*/
        detail: {
          total_price:'',
          income_money:'',
          order_count:'',
          refund_money:''
        },
        activeName:'sale',
        salesNumRank:[],
        salesMoneyRank:[]
      };
    },
    created() {
      /*获取列表*/
      this.getParams();
    },
    methods: {
      /*获取参数*/
      getParams() {
        let self = this;
        self.loading = true;
        StoreApi.storeSurvey({},
            true
          )
          .then(data => {
            self.detail= data.data.detail;
            self.salesNumRank=data.data.salesNumRank;
            self.salesMoneyRank=data.data.salesMoneyRank;
            self.loading = false;
          })
          .catch(error => {
            self.loading = false;
          });
      },
      handleClick(){
        this.getParams()
      }
    }
  };
</script>
<style lang="scss">
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    padding: 20px;
    border-radius: 4px;
    min-height: 36px;
  }

  .bg-purple {
    background: #f4f4f4;
  }

  .table-wrap {
    padding: 20px;
    padding-top: 0;
  }

  .common-form-data {
    margin-left: 15px;
    font-weight: 500;
  }

  .tips {
    padding: 15px;
    margin-bottom: 20px;
  }

  .tips_tit {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .tips_txt {
    line-height: 25px;
    color: #666;
    font-size: 14px;
  }

  .detail_prici {
    font-size: 20px;
    color: #000;
    font-weight: bold;
    margin-top: 10px;
    max-width: 250px;
  }
</style>
